<template>
  <div
    ref="chartWrapper"
    :class="className"
    :style="{ height: height, width: width }"
  />
</template>

<script>
// import echarts from 'echarts'
require("echarts/theme/macarons"); // echarts theme
import { debounce } from "@/utils";

// const animationDuration = 6000

export default {
  props: {
    option: {
      type: Object
    },
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
    // this.__resizeHandler = debounce(() => {
    //   if (this.chart) {
    //     this.chart.resize()
    //   }
    // }, 100)
    window.addEventListener("resize", this.__resizeHandler);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // this.chart = this.$echarts.init(this.$el, 'macarons')

      const chartWrapper = this.$refs.chartWrapper;
      this.chart = this.$echarts.init(chartWrapper);
      const option = {
        ...this.option,
        toolbox: {
          show: true,
          feature: {
            // mark: { show: true },
            // dataView: { show: true, readOnly: false },
            // restore: { show: true },
            saveAsImage: {
              show: true,
              iconStyle: {
                borderColor: "#fff"
              }
            }
          }
        }
      };

      this.chart.setOption(option);

      // this.chart.setOption({
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: { // 坐标轴指示器，坐标轴触发有效
      //       type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      //     }
      //   },
      //   grid: {
      //     top: 10,
      //     left: '2%',
      //     right: '2%',
      //     bottom: '3%',
      //     containLabel: true
      //   },
      //   xAxis: [{
      //     type: 'category',
      //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      //     axisTick: {
      //       alignWithLabel: true
      //     }
      //   }],
      //   yAxis: [{
      //     type: 'value',
      //     axisTick: {
      //       show: false
      //     }
      //   }],
      //   series: [{
      //     name: 'pageA',
      //     type: 'line',
      //     data: [79, 52, 200, 334, 390, 330, 220],
      //     animationDuration
      //   }, {
      //     name: 'pageB',
      //     type: 'line',
      //     data: [80, 52, 200, 334, 390, 330, 220],
      //     animationDuration
      //   }, {
      //     name: 'pageC',
      //     type: 'line',
      //     data: [30, 52, 200, 334, 390, 330, 220],
      //     animationDuration
      //   }]
      // })
    }
  }
};
</script>
